<template>
  <dialog class="modal modal-open" v-if="sumUp && courseStore.courseData">
    <div class="modal-box max-w-[780px] h-[70vh] p-0">
      <div class="card h-full bg-base-100">
        <div class="card-body flex flex-col justify-between p-8">
          <!-- 介绍话语 -->
          <div class="space-y-2 flex justify-between items-center">
            <h2 class="text-xl font-bold">
              <span class="text-2xl">{{
                correctRate >= 80 ? "🎯" : "🎮"
              }}</span>
              {{ encouragementText.title }}
            </h2>
            <p class="text-base-content/60">{{ encouragementText.subtitle }}</p>
          </div>

          <!-- 主要内容区域 -->
          <div class="flex-1 flex flex-col justify-center gap-10 py-6">
            <!-- 课程展示区域 -->
            <div class="bg-base-200 rounded-box p-8">
              <div class="flex flex-col gap-6">
                <!-- 课程标题和图标 -->
                <div class="text-center space-y-3">
                  <h3 class="text-2xl font-bold text-primary">
                    {{ courseStore.courseData.course.title }}
                  </h3>
                  <p class="text-base text-base-content/70 max-w-md mx-auto">
                    {{ courseStore.courseData.course.description }}
                  </p>
                </div>

                <!-- 课程信息卡片 -->
                <div class="grid grid-cols-2 gap-4">
                  <div
                    class="bg-base-100 rounded-xl p-4 text-center space-y-2 shadow-sm hover:shadow-md transition-shadow"
                  >
                    <div class="text-sm text-base-content/60">总单词数</div>
                    <div class="text-2xl font-bold text-primary">
                      {{totalWords}}
                    </div>
                  </div>
                  <div
                    class="bg-base-100 rounded-xl p-4 text-center space-y-2 shadow-sm hover:shadow-md transition-shadow"
                  >
                    <div class="text-sm text-base-content/60">当前章节</div>
                    <div class="text-2xl font-bold text-primary">                    {{ courseStore.courseData.title }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 统计信息 -->
            <div
              class="stats stats-vertical lg:stats-horizontal bg-base-100 shadow-xl"
            >
              <div class="stat px-6">
                <div class="stat-figure text-primary opacity-80">
                  <component :is="ClockIcon" class="w-8 h-8" />
                </div>
                <div class="stat-title font-medium">学习用时</div>
                <div class="stat-value text-primary text-3xl">
                  {{ timer?.hours }}:{{ timer?.minutes }}:{{ timer?.second  }}
                </div>
              </div>

              <div class="stat px-6">
                <div class="stat-figure text-success opacity-80">
                  <component :is="ChartBarIcon" class="w-8 h-8" />
                </div>
                <div class="stat-title font-medium">正确率</div>
                <div class="stat-value text-success text-3xl">
                  {{ correctRate }}%
                </div>
                <div class="stat-desc">本组单词</div>
              </div>

              <div class="stat px-6">
                <div class="stat-figure text-error opacity-80">
                  <component :is="XCircleIcon" class="w-8 h-8" />
                </div>
                <div class="stat-title font-medium">错词数量</div>
                <div class="stat-value text-error text-3xl">
                  {{ wrongWordsCount }}
                </div>
                <div class="stat-desc">需要加强记忆</div>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div
            class="card-actions flex-col sm:flex-row items-center justify-end gap-3"
          >
            <button class="btn btn-ghost hover:bg-base-200" @click="navigateTo('/')">返回首页</button>
            <button class="btn btn-ghost hover:bg-base-200" @click="getCourseChapter()">课程目录</button>
            <button class="btn btn-ghost hover:bg-base-200" @click="resetCourse()">再来一次</button>
            <button
              class="btn btn-primary shadow-xl hover:shadow-primary/30 min-w-[120px]"
              @click="goNextChapter()"
            >
              下一课
            </button>
          </div>
        </div>
      </div>
    </div>
  </dialog>
</template>
<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useCourseStore } from "~/stores/course";
import { useSumUp,useAnswer } from "~/composables/study/studentStatus";
import { putUserChapterData } from "~/composables/user/chapter";
import { putUserErrBook } from "~/composables/user/errbook";
import {getNextChapter} from "~/composables/course/chapter";
import { useTimer } from "~/composables/study/useTime";
import { timeSet } from "~/composables/common/time";
import { toast } from "vue-sonner";
import { celebrate } from '~/composables/common/celebrate';
const { startTimer, resetSeconds, seconds, pauseTimer } = useTimer();
const { getTime } = timeSet();
const { sumUp,hideSumUp } = useSumUp();
import {
  ClockIcon, // 时钟图标
  ChartBarIcon, // 图表图标
  XCircleIcon, // X图标
} from "@heroicons/vue/24/outline";
const courseStore = useCourseStore();
const wrongWordsCount = ref(0)
const totalWords =ref(0)
const correctRate=ref(0)
// 当前页面计算
const useSum = () => {
  totalWords.value = courseStore.findContentCount()
  wrongWordsCount.value = courseStore.errIds.length;
  const correctWords = totalWords.value - wrongWordsCount.value;
  correctRate.value=Math.round((correctWords / totalWords.value) * 100);
  //提交数据
  const data = {
    courseId : courseStore.courseData?.course.id,
    chapterId: courseStore.courseData?.id,
    correctRate: correctRate.value,
    studyCount: totalWords.value,
    wrongCount: wrongWordsCount.value,
    studyTime: seconds.value,
  } 
  putUserChapterData(data);
  putUserErrBook(courseStore.errIds);
}
const getCourseChapter = () => {
  navigateTo("/course/" + courseStore.courseData?.course.id);
}
const timer = ref({
  hours: 0,
  minutes: 0,
  second: 0,
});
watch(sumUp, (val) => {
  if (val) {
    timer.value= getTime(seconds.value);
    pauseTimer();
    useSum();
    celebrate();
  }
});
function resetCourse(){
  courseStore.resetCurrentIndex();
  resetSeconds();
  hideSumUp()
  startTimer();
}
async function goNextChapter(){
  const nextChapterId = await getNextChapter(courseStore.courseData?.id || "")
  console.log(nextChapterId)
  if(nextChapterId){
    navigateTo("/study/"+nextChapterId+"?type"+courseStore.studyType)
    resetCourse()
  }else{
    toast.error("没有下一课了")
  }
}



// 根据正确率获取鼓励话语
const encouragementText = computed(() => {
  if (correctRate.value >= 95) {
    return {
      title: "哇！完美通关！🏆",
      subtitle: "这波操作，闪电五连鞭都没你帅！",
    };
  } else if (correctRate.value >= 80) {
    return {
      title: "厉害了我的同学！",
      subtitle: "你离成为单词王者只差一个脑门上的痘痘～",
    };
  } else if (correctRate.value >= 60) {
    return {
      title: "及格万岁！继续冲！",
      subtitle: "比起记单词，你还是更擅长吃零食吧？😏",
    };
  } else {
    return {
      title: "嗯...今天状态不佳？",
      subtitle: "别灰心，单词君说它下次会对你温柔点～",
    };
  }
});

</script>

<style scoped></style>
